<div id="gcb_toubiaoxiangmuguanli">
<section class="content-header">
  <h1>
    投标项目
    <small>工程部</small>
  </h1>
  <ol class="breadcrumb">
    <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
    <li>工程部</li>
    <li class="active">投标项目</li>
  </ol>
</section>

<section class="content">
  <div class="row">
    <div class="col-xs-12">
      <div class="box">
        <div class="box-header">
          <div class="btn-group pull-left" data-type="actionBar">
            <button type="button" class="btn btn-default" data-action="addByForm"><i class="fa fa-plus"></i> 添加</button>
            <button type="button" class="btn btn-default" data-action="modify"><i class="fa fa-pencil"></i> 修改</button>
            <button type="button" class="btn btn-default" data-action="delete"><i class="fa fa-remove"></i> 删除</button>
          </div>
          <div class=" pull-right" data-type="columnControl">
          </div>
          <div class=" pull-right " data-type="searchControl">
          </div>
          <div class="clearfix"></div>
        </div>
        <div class="box-body">
          <table class="table table-bordered table-striped table-hover"></table>
        </div>
      </div>
    </div>
  </div>
</section>

<script type="text/template" data-for="tp_editor">
  <form role="form" class="form-horizontal">
    <div class="box-body">
      <div class="form-group">
          <label class="col-sm-2 control-label">项目名称</label>

          <div class="col-sm-4">
              <input type="text" class="form-control" name="p1" value="<%=data.p1?data.p1:''%>">
          </div>
          <label class="col-sm-2 control-label">项目性质</label>

          <div class="col-sm-4">
              <select class="form-control">
                  <option>自投项目</option>
                  <option>G</option>
                  <option>W</option>
                  <option>J</option>
              </select>
          </div>
      </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">参与单位</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" name="p1" value="<%=data.p1?data.p1:''%>">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">投标日期</label>
            <div class="col-sm-4">
                <div class="input-group date">
                    <div class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                    </div>
                    <input type="text" class="form-control pull-right" data-plugin="date" name="p8" value="<%=data.p8?data.p8:''%>">
                </div>
            </div>
            <label class="col-sm-2 control-label">投标类型</label>
            <div class="col-sm-4">
                <select class="form-control">
                    <option>自投项目</option>
                    <option>待投</option>
                    <option>W</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">投标结果</label>
            <div class="col-sm-2">
                <select class="form-control">
                    <option>中标</option>
                    <option>未中标</option>
                    <option>完成</option>
                    <option>入围</option>
                    <option>未入围</option>
                    <option>待投</option>
                </select>
            </div>
        </div>
        <div class="border"></div>

      <div class="form-group">
        <label class="col-sm-2 control-label">备注</label>

        <div class="col-sm-10">
            <textarea name="p3" class=form-control>
                <%=data.p3?data.p3:''%>
            </textarea>
        </div>
      </div>

    </div>
  </form>
</script>

<script>
  USEN(function () {
    //模块ID(全系统唯一)
    var id = "#gcb_toubiaoxiangmuguanli";

    //定义页面变量
    var $el = $(id);
    var $actionBar = $el.find("[data-type=actionBar]");
    var tableId = id + " table.table";
    var $table = $(tableId);
    var $editor = $el.find("[data-for=tp_editor]");
    var myTable;


    //定义增\删\改 方法
    var editor = {
      add : function(){
        USEN.modal({
          title:"创建",
          submitTxt:"确定",
          submitCb:function($el){
            //提交表单
            $el.find("form").ajaxSubmit({
              url: './simdata/common_add_action.json',
              beforeSubmit: function (data) {
//                console.log("数据提交之前.")
              },
              success: function (data, state, obj) {
                USEN.notifyAlert({
                  title:"提示:",
                  content:'提交成功,刷新Table组件'
                });
                $el.modal("hide");
                if (myTable) myTable.ajax.reload();
              }
            })
          },
          filter:function(data){
            return _.template($editor.html())({
              data:data
            });
          }
        });
      },
      remove : function(data){
        USEN.modal({
          title:"提示",
          content:"是否删除这条数据?",
          submitTxt:"删除",
          submitCb:function($el){
            $.ajax({
              url:"./simdata/common_remove_action.json",
              data:data,
              success:function(result){
                USEN.notifyAlert({
                  title:"提示:",
                  content:'删除成功.'
                });
                $el.modal("hide");
                if (myTable) myTable.ajax.reload();
              }
            })
          }
        })
      },
      modify : function(data){
        USEN.modal({
          title:"修改",
          data:data,
          submitTxt:"确定",
          submitCb:function($el){
            $el.find("form").ajaxSubmit({
              url: './simdata/common_modify_action.json',
              beforeSubmit: function (data) {
                console.log("数据提交之前.")
              },
              success: function (data, state, obj) {
                USEN.notifyAlert({
                  title:"提示:",
                  content:'提交成功,刷新Table组件'
                });
                $el.modal("hide");
                if (myTable) myTable.ajax.reload();
              }
            })
          },
          filter:function(data){
            return _.template($editor.html())({
              data:data
            });
          }
        });
      }
    };

    // 绑定列表编辑按钮事件
    $actionBar.find("[data-action]").on("click",function(){
      var action = $(this).data("action");
      var $selected = $table.find('tr.selected');
      switch(action){
        case "addByForm" :
          editor.add();
          break;
        case "modify" :
                if($selected.length > 0){
                  editor.modify(myTable.row( $selected ).data());
                }else{
                  //提示"请选中要修改的行"
                  USEN.modal({
                    title:"提示",
                    content:"请选中要修改的行.",
                    cancelBtn:true,
                    cancelTxt:"关闭"
                  })
                }
          break;
        case "delete" :
          if($selected.length > 0){
            editor.remove(myTable.row( $selected ).data());
          }else{
            //提示"请选中要修改的行"
            USEN.modal({
              title:"提示",
              content:"请选中要修改的行.",
              cancelBtn:true,
              cancelTxt:"关闭"
            })
          }
          break;
      }
    });

    console.log($(tableId))
    //初始化datatable数据列表
    myTable = new USEN.Datatable({
        "scrollX": false,
      //设置ID
      "id":tableId,
      //设置列控制模块容器
      "columnControl":id + " [data-type=columnControl]",
      //设置搜索模块容器
      "searchControl":id + " [data-type=searchControl]",
      //每行"操作"自定义action按钮回调
      onItemAction:function($tr,action){
        switch(action){
          case "modify" :
            editor.modify(this.row( $tr ).data());
            break;
          case "delete" :
            editor.remove(this.row( $tr ).data());
            break;
        }
      },
      //配置服务
      "ajax": "./simdata/common_table_ation.json",
      //列设置
      "columns": [
        {
          data: null,
          defaultContent: '',
          className: 'select-checkbox',
          orderable: false, searchable: false,
          width:"30px"
        },
          { "title": "操作","data":null,bSortable: false,width:'200px',render: function (data, type, full, meta) {
              return  '<button data-item-action="modify" class="btn btn-primary">修改</button>&nbsp;&nbsp;' +
                      '<button data-item-action="delete" class="btn btn-danger">删除</button>'
          }},
        { "title":"序号", "data": "p1"},
        { "title":"投标类型","data": "p2" },
        { "title":"日期","data": "p3" },
        { "title":"项目名称","data": "p4" },
        { "title":"项目性质","data": "p5" },
        { "title":"参与单位","data": "p6" },
        { "title":"投标结果","data": "p7" },
        { "title":"备注","data": "p8" }
      ]
    })
  });
</script>
</div>